<template>
    <el-menu
        :default-active="activeIndex"
        :collapse="collapse"
        :background-color="backgroundColor"
        :text-color="textColor"
        :active-text-color="activeTextColor"
        :mode="mode"
        :class="className"
    >
        <menu-item v-for="route in routes" :key="route.path" :route="route" :base-path="route.path" />
    </el-menu>
</template>

<script>
import MenuItem from './components/menu-item/index.vue';

export default {
    props: {
        routes: {
            type: Array
        },
        mode: {
            type: String,
            default: 'vertical'
        },
        collapse: {
            type: Boolean
        },
        backgroundColor: {
            type: String
        },
        textColor: {
            type: String
        },
        activeTextColor: {
            type: String
        },
        className: {
            type: String
        }
    },
    data() {
        return {
            activeIndex: this.$route.path
        };
    },
    components: {
        MenuItem
    },
    watch: {
        $route: {
            handler(to, from) {
                if (!from && to.meta.defaultActive) {
                    this.activeIndex = to.meta.defaultActive;
                }
            },
            immediate: true
        }
    },
    computed: {}
};
</script>

<style lang="scss" scoped>
</style>
